<template>
	<div class="edu-page-warp">
		<inner-breadcrumb v-model="pathKey" :path="path" v-show="pathKey!='main'"></inner-breadcrumb>
		<template v-if="pathKey=='main'">
			<el-card shadow="never">
				<div class="edu-page-title">{{$t('courses.levelCourseManage')}}</div>
				<div class="edu-opertion-bar">
					<div class="float-right">
						<el-button type="danger" @click="batchDelete">{{$t("message.delete")}}</el-button>
						<el-button type="primary" @click="openLevelCourseDialog">{{$t("message.add")}}</el-button>
					</div>
				</div>
				<edu-table
					:data="levelCourseCategory"
					@selection-change="choose"
					@page-change="handleCurrentChange"
					:total="queryForm.total_"
					:pageSize="queryForm.pageSize_"
					:current-page="queryForm.pageNum_"
				>
					<edu-table-column :label="$t('dic.name')">
						<template slot-scope="scope">{{scope.row.nameI18n}}{{scope.row.levelI18n}}</template>
					</edu-table-column>
					<edu-table-column prop="startGrade" :label="$t('courses.beginGrade')"></edu-table-column>
					<edu-table-column prop="endGrade" :label="$t('courses.endGrade')"></edu-table-column>
					<edu-table-column :label="$t('message.operating')">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="showEditDialog(scope.row)">{{$t("message.edit")}}</el-button>
							<el-button
								type="text"
								size="mini"
								@click="deleteCategory(scope.row)"
							>{{$t("message.delete")}}</el-button>
							<el-button type="text" size="mini" @click="showCourseMaintain(scope.row)">{{$t('courses.maintenance')}}</el-button>
						</template>
					</edu-table-column>
				</edu-table>
			</el-card>

			<!--添加/编辑分级课程分类对话框-->
			<el-dialog
				:title="title"
				:visible.sync="showLevelCourseDialog"
				width="800px"
				:close-on-click-modal="false"
				v-drag-dialog
			>
				<el-form
					:model="postForm"
					ref="postForm"
					label-position="right"
					label-width="80px"
					:rules="rules"
					label-suffix=":"
				>
					<el-row :gutter="24">
						<el-col :span="12">
							<el-form-item :label="$t('dic.name')" prop="name">
								<el-select v-model="postForm.name" style="width: 100%;">
									<el-option
										v-for="item in options.LevelNames"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="$t('courses.level')" prop="level">
								<el-select v-model="postForm.level" style="width: 100%;">
									<el-option
										v-for="item in options.level"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="12">
							<el-form-item  :label="$t('courses.beginGrade')" prop="startGrade">
								<el-date-picker
									style="width:100%"
									v-model="postForm.startGrade"
									type="year"
									:placeholder="$t('courses.plsChooseBeginGrade')"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item  :label="$t('courses.endGrade')" prop="endGrade">
								<el-date-picker
									style="width:100%"
									v-model="postForm.endGrade"
									type="year"
									:placeholder="$t('courses.plsChooseEndGrade')"
								></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="24">
							<el-form-item class="float-right no-bottom no-right">
								<el-button @click="closeLevelCourseDialog">{{$t("message.cancel")}}</el-button>
								<el-button type="primary" @click="onSubmit">{{$t("message.save")}}</el-button>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-dialog>
		</template>

		<LevelMaintenanceComponent
			v-show="pathKey=='maintenance'"
			:heardTitle="heardTitle"
			@back="pathKey='main'"
			@LevelAddBread="levelAddBread"
			ref="levelMaintenance"
		></LevelMaintenanceComponent>

		<LevelAddCourseComponent
			v-show="pathKey=='add'"
			:heardTitle="heardTitle"
			:options="options"
			@back="addBack"
			ref="levelAdd"
		></LevelAddCourseComponent>
	</div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import {
	addcoursesCategory,
	coursesCategoryList,
	deleteCoursesCategory,
	getCoursesCategoryById,
	updateCoursesCategory
} from "common/src/api/resource/publicCourse";
import LevelAddCourseComponent from "./component/LevelAddCourseComponent";
import LevelMaintenanceComponent from "./component/LevelMaintenanceComponent";

export default {
	name: "levelCourseManage",
	components: {
		LevelMaintenanceComponent,
		LevelAddCourseComponent
	},
	data() {
		return {
			pathKey: "main",
			path: {
				label: this.$t('courses.courseManagement'),
				key: "belong",
				disable: true,
				children:[{
						label: this.$t('courses.levelCourseManage'),
						key: "main",
						children: [
							{
								label: this.$t('courses.maintenance'),
								key: "maintenance",
								children: [
									{
										label: this.$t('courses.addCourse'),
										key: "add"
									}
								]
							}
						]
						}]
			},
			queryForm: {
				type: 2,
				pageNum_: 1,
				pageSize_: 20,
				total_: 0
			},
			postForm: {
				name: "",
				nameEn: "",
				startGrade: "",
				endGrade: "",
				type: 2,
				level: "",
				remark: "",
				remarkEn: ""
			},
			coursesQueryForm: {
				pageNum_: 1,
				pageSize_: 20,
				total_: 0,
				college: "",
				trainingLevel: "",
				condition: "",
				status: 3
			},

			rules: {
				name: [
					{
						required: true,
						message:  this.$t('courses.levelCourseNameRequire'),
						trigger: "blur"
					}
				],
				level: [
					{ 
						required: true, 
						message: this.$t('courses.levelRequire'),
						trigger: "blur" }
				],
				startGrade: [
					{
						required: true,
						message: this.$t('courses.beginGradeRequire'),
						trigger: "blur"
					}
				],
				endGrade: [
					{ validator: this.endGradeValidate, trigger: "blur" }
				]
			},
			options: {
				level: [],
				trainingLevel: [],
				college: [],
				LevelNames: []
			},
			title: "",
			showLevelCourseDialog: false,
			levelCourseCategory: [],
			chooseCourseCategories: [],
			editCategoryId: "", //编辑分级课程分类id
			showCourseMaintainDialog: false,
			courseOprDialog: false,
			courses: []
		};
	},
	mounted: function() {
		this.init();
	},
	methods: {
		init() {
			let data = {
				lang: this.$store.getters.language || "cn",
				type: "allChild",
				keys: ["X_PYCC", "X_YX", "X_KCKM", "X_CJDJ"]
			};
			queryDic(data).then(res => {
				if (res.code == 200) {
					UTILS.fillSelect(
						{
							trainingLevel: "X_PYCC",
							college: "X_YX",
							level: "X_CJDJ",
							LevelNames: "X_KCKM"
						},
						res.data,
						this.options
					);
					this.options.trainingLevel = this.options.trainingLevel.filter(
						obj => obj.value != 4 && obj.value != 6
					); //过滤研究生和博士
				}
			});
			this.getDataList();
		},
		onSubmit() {
			this.$refs.postForm.validate(valid => {
				if (!valid) {
					return;
				}
				let fn = addcoursesCategory;
				let data = _.cloneDeep(this.postForm);
				data.startGrade = this.postForm.startGrade.getFullYear();
				if (this.postForm.endGrade) {
					data.endGrade = this.postForm.endGrade.getFullYear();
				}
				if (this.editCategoryId) {
					fn = updateCoursesCategory;
					data.id = this.editCategoryId;
				}
				fn(data).then(res => {
					if (res.code == 200) {
						this.showLevelCourseDialog = false;
						this.getDataList();
					}
				});
			});
		},
		resetInitFields() {
			this.postForm.name = "";
			this.postForm.startGrade = "";
			this.postForm.endGrade = "";
			this.postForm.level = "";
			if (this.$refs.postForm) this.$refs.postForm.resetFields();
			this.showLevelCourseDialog = true;
		},
		getDataList() {
			coursesCategoryList(this.queryForm).then(res => {
				if (res.code == 200) {
					res.data.list.forEach((c, index) => {
						c.number =
							(this.queryForm.pageNum_ - 1) *
								this.queryForm.pageSize_ +
							index +
							1;
					});
					this.levelCourseCategory = res.data.list;
					this.queryForm.total_ = res.data.total_;
				}
			});
		},
		handleCurrentChange(val) {
			this.queryForm.pageSize_ = val.pageSize;
			this.queryForm.pageNum_ = val.pageNum;
			this.getDataList();
		},

		openLevelCourseDialog() {
			this.showLevelCourseDialog = true;
			this.title = this.$t('courses.addLevelCategory');
			this.editCategoryId = "";
			this.resetInitFields();
		},
		closeLevelCourseDialog() {
			this.showLevelCourseDialog = false;
		},
		choose(val) {
			this.chooseCourseCategories = val;
		},
		//结束年级验证
		endGradeValidate(rule, value, callback) {
			if (this.postForm.endGrade) {
				let startGrade = this.postForm.startGrade.getFullYear();
				let endGrade = this.postForm.endGrade.getFullYear();
				if (startGrade > endGrade) {
					callback(new Error(this.$t('courses.timeRequire')));
				} else {
					callback();
				}
			} else {
				callback();
			}
		},
		showEditDialog(row) {
			this.editCategoryId = row.id;
			this.title = this.$t('courses.editLevelCategory');
			this.resetInitFields();
			getCoursesCategoryById(row.id).then(res => {
				if (res.code == 200) {
					this.postForm.name = res.data.name;
					let startGrade = new Date();
					startGrade.setFullYear(res.data.startGrade, 1, 1);
					this.postForm.startGrade = startGrade;
					if (res.data.endGrade) {
						let endGrade = new Date();
						endGrade.setFullYear(res.data.endGrade, 1, 1);
						this.postForm.endGrade = endGrade;
					}
					this.postForm.level = res.data.level.toString();
				}
			});
		},
		//单个删除分级课程类别
		deleteCategory(row) {
			// this.$confirm(
			// 	//"确认是否删除该分级课程分类?",
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteCoursesCategory({ ids: [row.id] }).then(res => {
					if (res.code == 200) {
						this.getDataList();
					}
				});
			});
		},
		//批量删除分级课程类别
		batchDelete() {
			if (this.chooseCourseCategories.length == 0) {
				this.$noSelectAlert();
				// this.$message({
				// 	type: "info",
				// 	message: this.$t('courses.plsChooseLevelCategory')
				// });
				return;
			}
			// this.$confirm(
			// 	this.$t("message.deleteConfirm"),
			// 	this.$t("message.confirm"),
			// 	{
			// 		confirmButtonText: this.$t("message.confirm"),
			// 		cancelButtonText: this.$t("message.cancel"),
			// 		type: "warning"
			// 	}
			this.$delConfirm().then(() => {
				deleteCoursesCategory({
					ids: this.chooseCourseCategories.map(c => c.id)
				}).then(res => {
					if (res.code == 200) {
						this.getDataList();
					}
				});
			});
		},
		//显示维护课程对话框
		showCourseMaintain(row) {
			this.pathKey = "maintenance";
			this.heardTitle = this.$t('courses.maintenance');
			this.$refs["levelMaintenance"].getCoursesMaintain(row.id);
			// this.showCourseMaintainDialog = true;
			// this.coursesForm.categoryId = row.id;
			// this.getCoursesMaintain();
		},

		//打开添加课程对话框，初始化
		levelAddBread(categoryId) {
			this.pathKey = "add";
			this.heardTitle = this.$t('courses.addCourse');
			this.$refs["levelAdd"].getCoursesByCondition(categoryId);
			// this.resetCoursesQuery();
			// this.courseOprDialog = true;
			// this.getCoursesByCondition();
		},
		addBack(type) {
			console.log(type);
			this.pathKey = "maintenance";
		}
	},
	watch: {
		pathKey(val, oldVal) {
			if (val == "main") {
				this.getDataList();
			}
			if (val == "maintenance" && oldVal != "main") {
				this.heardTitle = this.$t('courses.maintenance');
				this.$refs["levelMaintenance"].getCoursesMaintain();
			}
			if (val == "add" && oldVal != "maintenance") {
				this.heardTitle =  this.$t('courses.addCourse');
				this.$refs["levelAdd"].getCoursesByCondition();
			}
			// if (val == "add" && oldVal != "maintenance") {
			// 	this.addCourseBread();
			// }
		}
	}
};
</script>
<style lang="scss" scoped>
</style>
